<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData" label-width="100px" label-position="right" >
      <el-form-item label="片区名称">
        <el-input @change="searchChange" placeholder="片区名称" v-model="formData.name" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人姓名">
        <el-input @change="searchChange" placeholder="合伙人姓名" v-model="formData.partnerName" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人手机">
        <el-input @change="searchChange" placeholder="合伙人手机" v-model="formData.partnerMobile" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select size="small" v-model="formData.status" @change="searchChange" clearable>
          <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在城市">
        <el-cascader
          @change="searchChange"
          v-model="formData.regionIds"
          :options="options"
          :props="props"
          size="small" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          v-model="formData.createDate"
          @change="searchChange"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>片区数量：{{chargingGroupCount}}</div>
      <div>充电桩数量：{{chargingCount}}</div>
    </div>
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :option="tableOption"
               @size-change="sizeChange"
               @current-change="currentChange">
      <template slot-scope="scope" slot="info">
        <div class="cell">
          <div>片区编号：<span>{{scope.row.id}}</span></div>
          <div>片区名称：<span>{{scope.row.name}}</span></div>
          <div>所在城市：<span>{{scope.row.regionName}}</span></div>
          <div>详细地址：<span>{{scope.row.address}}</span></div>
          <div>运营商：<span>{{scope.row.merchantName}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="otherInfo">
        <div class="cell">
          <div>站点描述：<span>{{scope.row.siteDescription}}</span></div>
          <div>停车描述：<span>{{scope.row.parkDescription}}</span></div>
          <div>营业时间：<span>{{scope.row.openingHoursDesc}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="siteImages">
          <el-image :src="scope.row.siteImagesList[0]"
             :preview-src-list="scope.row.siteImagesList"
             style="width: 40px; height: 40px"
             :fit="'fill'" alt="点击预览大图" slot="reference">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
           </el-image>
      </template>
      <template slot-scope="scope" slot="partnerInfo">
        <div class="cell">
          <div>合伙人姓名：<span>{{scope.row.partnerName}}</span></div>
          <div>合伙人手机号：<span>{{scope.row.partnerMobile}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="rate">
        <div>
          <div>昨日使用率：<span>{{scope.row.yesterdayUseRate}}</span></div>
          <div>上周使用率：<span>{{scope.row.lastWeekUseRate}}</span></div>
          <div>上月使用率：<span>{{scope.row.lastMonthUseRate}}</span></div>
        </div>
      </template>
      <template slot-scope="scope"
                slot="menu">
        <div class="menu-list">
          <el-button type="primary"
                     size="small"
                     style="margin-left: 8px"
                     @click.stop="addOrUpdateHandle(scope.row.id)">查看/编辑</el-button>

          <el-button type="primary"
                     size="small"
                     @click.stop="divideInfo(scope.row.id)" plain>分成管理</el-button>
          <el-button type="primary"
                     size="small"
                     @click.stop="detail(scope.row.id)" plain>查看充电桩</el-button>
          <el-button type="primary" size="small" @click.stop="lookFee(scope.row.id)" plain>查看计费</el-button>
        </div>
      </template>
    </avue-crud>
    <add-district-or-update ref="addDistrictOrUpdate" @refreshDataList="getDataList"></add-district-or-update>
    <divide-info ref="divideInfo"></divide-info>
    <pile-detail-info ref="pileDetailInfo" v-if="showPileDetailInfo"></pile-detail-info>
    <fee-car-dialog ref="feeCarDialog"></fee-car-dialog>
  </div>
</template>

<script>
  import { tableCarOption } from '@/crud/district/districtList'
  import addDistrictOrUpdate from './addDistrictOrUpdate'
  import pileDetailInfo from '../pile/pileDetailInfo'
  import divideInfo from './divideInfo'
  import feeCarDialog from './fee-car-dialog'
  export default {
    components: {
      addDistrictOrUpdate,
      divideInfo,
      pileDetailInfo,
      feeCarDialog
    },
    data () {
      return {
        dataList: [],
        dataListLoading: false,
        tableOption: tableCarOption,
        showPileDetailInfo:false,
        formData: {
          name: '',
          status: '',
          partnerName: '',
          partnerMobile: '',
          createDate: '',
          regionIds: []
        },
        statusList: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '启用',
            value: '1'
          },
          {
            label: '停用',
            value: '0'
          }
        ],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        options: [],
        props: {
          multiple: false,
          label: 'name',
          value: 'id',
          children: 'childs'
        },
        chargingCount:0,
        chargingGroupCount:0
      }
    },

    mounted () {
      this.getAreaList()
      this.getDataList(null,this.formData)
    },

    methods: {
      // 获取数据列表
      getDataList (page, params) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/charging/group/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                chargingGroupType: 1,
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              params
            )
          )
        }).then(({ data }) => {
          this.dataList = data.data.chargingGroupList.records
          this.page.total = data.data.chargingGroupList.total
          this.chargingCount= data.data.chargingCount
          this.chargingGroupCount= data.data.chargingGroupCount
          this.dataListLoading = false
          this.initImages()
          console.log(this.page)
        })
      },
      initImages(){
        this.dataList.forEach(x=>{
          x.siteImagesList=[]
          if(x.siteImages!=null &&x.siteImages!=''){
            x.siteImagesList = x.siteImages.split('|').filter(function (s) {
                return s && s.trim()
            })
          }
        })
      },

      getAreaList () {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/system/get/all/region'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.options = data.data
        })
      },


      // 条件查询
      searchChange () {
        console.log(this.formData)
        if(this.formData.regionIds.length >= 3){
          this.formData.regionId = this.formData.regionIds[2]
        }
        else {
          this.formData.regionId = ''
        }
        if(this.formData.createDate&&this.formData.createDate.length > 0) {
          this.formData.createStartTime = this.formData.createDate[0]
          this.formData.createEndTime = this.formData.createDate[1]
        }
        else {
          this.formData.createStartTime = ''
          this.formData.createEndTime = ''
        }
        this.page.currentPage=1
        this.getDataList(this.page, this.formData)
      },

      // 编辑或查看
      addOrUpdateHandle (id) {
        this.$refs['addDistrictOrUpdate'].init(id)
      },

      divideInfo (id) {
        this.$refs['divideInfo'].init(id)
      },

      detail(id){
        this.showPileDetailInfo=true
        this.$nextTick(()=>{
          this.$refs['pileDetailInfo'].init({chargingGroupId:id})
        })
      },

      lookFee(id){
        this.$refs['feeCarDialog'].init(id)
      },

      currentChange(val){
        this.page.currentPage=val
        this.getDataList(this.page,this.formData)
      },
      sizeChange(val){
        this.page.pageSize=val
        this.getDataList(this.page,this.formData)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cell{
  text-align: left;
  }
  .el-input{
    width: 200px;
  }
  .sumary-list{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    div{
      height: 30px;
      padding: 0px 12px;
      line-height: 30px;
      border:solid 1px #009FF1;
      border-radius: 15px;
      margin-right: 10px;
    }
    div:hover{
      color: white;
      background-color: #009FF1;
    }
  }
  .menu-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .el-button{
      width: 100px;
      margin-bottom: 8px;
    }
  }
</style>
